<template>
  <Tabs v-model="tab">
    <TabPane :style="getTabPaneStyle('student')" :label="`学生数据(${student_count})`" name="student">
      <student-list ref="student" @on-change-total="total => (this.student_count = total)" />
    </TabPane>
    <TabPane :style="getTabPaneStyle('teacher')" :label="`老师数据(${teacher_count})`" name="teacher">
      <teacher-list ref="teacher" @on-change-total="total => (this.teacher_count = total)" />
    </TabPane>
    <TabPane :style="getTabPaneStyle('organization')" :label="`班级数据(${organization_count})`" name="organization">
      <organization-list ref="organization" @on-change-total="total => (this.organization_count = total)" />
    </TabPane>
    <TabPane :style="getTabPaneStyle('room')" :label="`教室数据(${room_count})`" name="room">
      <room-list ref="room" @on-change-total="total => (this.room_count = total)" />
    </TabPane>
    <TabPane :style="getTabPaneStyle('student-organization')" :label="`分班数据(${student_organization_count})`" name="student-organization">
      <student-organization-list ref="student-organization" @on-change-total="total => (this.student_organization_count = total)" />
    </TabPane>
  </Tabs>
</template>
<script>
import StudentList from './list/student'
import TeacherList from './list/teacher'
import OrganizationList from './list/organization'
import RoomList from './list/room'
import StudentOrganizationList from './list/student-organization'
export default {
  components: {
    'student-list': StudentList,
    'teacher-list': TeacherList,
    'organization-list': OrganizationList,
    'room-list': RoomList,
    'student-organization-list': StudentOrganizationList
  },
  name: 'tab',
  data () {
    return {
      tab: 'student',
      student_count: 0,
      teacher_count: 0,
      organization_count: 0,
      room_count: 0,
      student_organization_count: 0
    }
  },
  methods: {
    getTabPaneStyle (cate) {
      const { tab } = this
      if (tab === cate) {
        return {}
      }
      return {
        height: '0px'
      }
    },
    refresh () {
      this.$refs['student'].refresh()
      this.$refs['teacher'].refresh()
      this.$refs['room'].refresh()
      this.$refs['organization'].refresh()
      this.$refs['student-organization'].refresh()
    }
  },
  watch: {
    tab (val, oldVal) {
      if (val !== oldVal) {
        this.$refs[val].refresh()
        this.$refs[oldVal].refresh()
      }
    }
  }
}
</script>
